<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>部门列表</title>
		<link  href="../../css/mycss.css" rel="stylesheet" type="text/css"/>
<!--		引入脚本-->
		<script src="../../js/jquery.js"></script>
		<script src="../../js/common.js"></script>
		<script>
			// 块级作用域
			let datalist;
			window.onload=function(){
				//调用第一页
				page(1);
				//调用其它页 上一页或下一页
				$("div>a").click(function (){
					page($(this).attr("data"));
				});

			}
			function page(cur){
				//向后端发判断请求，得到数据，装入表格中
				$.get(url+"dept/page",{cur:cur},function (data){
					//data为对象数组,PageInfo对象
					datalist=data.list;
					//定义串  移动代码 ctrl+shift+箭头
					let str=`<tr>
				<td>编号</td>
				<td>部门名称</td>
				<td>操作</td>
			</tr>`;
					for (var i = 0; i < datalist.length; i++) {
						// a标签先执行事件，再执行href链接属性  ctrl+向上箭头
						str+=`<tr>
				<td>${datalist[i].deptno}</td>
				<td>${datalist[i].dname}</td>
				<td>
					<a href="javascript:alert(1111)" onclick="datadel(${datalist[i].deptno},this)">删除</a>
					<a href="deptupdate.html?id=${datalist[i].deptno}">修改</a>
				</td>
			</tr>`;
					}
					//替换表格中的内容
					document.getElementById("con").innerHTML=str;
					//设置当前页及总页数
					$("#cur").html(data.pageNum+"/"+data.pages);
					//设置上一页及下一页是否可见
					if(data.hasPreviousPage){
						//新增属性
						$("#up").attr("data",data.pageNum-1);
						$("#up").css("display","inline");
					}else{
						$("#up").css("display","none");
					}
					if(data.hasNextPage){
						//新增属性
						$("#down").attr("data",data.pageNum+1);
						$("#down").css("display","inline");
					}else{
						$("#down").css("display","none");
					}

				},"json");
			}
			// 第一个参数为位置，第二个参数为对象
			function datadel(i,obj){
				let f=confirm("确定删除吗?");
				if (f) {
					//向后端发送请求，传递数据，进行回调处理
					// $.get(url+"dept/delete",{id:i},function(data){
					// 	if (data==1){
					// 		alert("删除成功");
					// 		//移除所在行
					// 		obj.parentNode.parentNode.remove();
					// 	}else{
					// 		alert("删除失败");
					// 	}
					// });
					$.ajax({
						url:url+"dept/delete",
						method:"delete",
						data:{id:i},
						success:function (data){
							if (data==1){
								alert("删除成功");
								//移除所在行
								obj.parentNode.parentNode.remove();
							}else{
								alert("删除失败");
							}
						}
					})
				} else{
					alert("取消删除");
				}
			}
		</script>
	</head>
	<body>
		<div>
			<table id="con">
				<tr>
					<td>编号</td>
					<td>部门名称</td>
					<td>操作</td>
				</tr>
			</table>
			
		</div>
		<div>
			<a href="javascript:;" id="up">上一页</a>
			<span id="cur">1</span>
			<a href="javascript:;" id="down">下一页</a>
		</div>
	</body>
</html>